<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet/less" href="./less/reset.less">
    <link rel="stylesheet/less" href="./less/team.less">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.6/qs.js"></script>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <title></title>
</head>
<body>
    <div id="app">
        <div class="main">
            <div class="login-top">
                <header class="title">
                    <div class="spell">我的团</div>
                    <a href="./mine.html">
                        <img src="./img/arrow_back.png">
                    </a>
                </header>
            </div>
            <div class="header">
                <ul>
                    <li v-for="(item,index) in classify" :class="item.index==isActive?'select':'default'" @click="classifyMethod(item.index)">
                        <div>{{item.name}}</div>
                        <img :src="item.index==isActive?'./img/check.png':''"  onerror="this.style.display='none'"/>
                    </li>
                </ul>
            </div>
            <div class="dateTime">
                <ul>
                    <li @click = "startTime(0)">{{start}}</li>
                    <li>至</li>
                    <li @click = "startTime(1)">{{end}}</li>
                </ul>
                <div @click="tuxedo">搜索</div>
            </div>
            <div class="tuxedo">
                <ul>
                    <li>参团总次数：{{openNum}}次</li>
                    <li>拼购成功：{{successNum}}次</li>
                    <li>已拼中：{{stakeIn}}次</li>
                    <li>未拼中：{{stakeUn}}次</li>
                    <li>拼购失败：{{failureNum}}次</li>
                    <li>拼购中：{{processingNum}}次</li>

                </ul>
            </div>
            <div class="scroll">
                <div class="openGroup" v-for="(item,index) in openGroup">
                    <ul>
                        <li>
                            <ul>
                                <li>{{item.time}}</li>
                                <li>团编号:{{item.Serial}}</li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li>
                                    <ul>
                                        <li>开团消费{{item.score}}积分</li>
                                        <li>拼中获得{{item.allScore}}积分</li>
                                    </ul>                                
                                </li>
                                <li>{{item.returnsIntegral}}，拼中返回积分</li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li>
                                    <img :src="item.img"/>
                                </li>
                                <li>
                                    <ul>
                                        <li>{{item.name}}</li>
                                        <li>{{item.weight}}</li>
                                        <li>
                                            <ul>
                                                <li>￥{{item.unitPrice}}</li>
                                                <li>x{{item.amount}}</li>
                                            </ul>
                                        </li>
                                        <li>总计：<span>￥{{item.totalPrice}}</span></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="module">
    import { myTeamData, myTeamDataList } from './js/request/api.js';
    import { shareLink } from './js/public.js';
    Vue.prototype.public = {shareLink};
     let app = new Vue({
        el: '#app',
        data: {
            classify:[
                {
                    index: 1,
                    name: '100元区'
                },
                {
                    index: 2,
                    name: '1000元区'
                }
            ],
            isActive: 1,
            status: 'none',
            start: '2021-04-16 13:50',
            end: '2021-04-19 13:50',
            openNum: '',
            successNum: '',
            stakeIn: '',
            stakeUn: '',
            failureNum: '',
            processingNum: '',
            openGroup:[
                {
                    time: '2021-03-23 20:12',
                    Serial: '9734',
                    score: '开团消费1积分',
                    allScore: '拼中获得120积分',
                    returnsIntegral: '已开团,拼中返回积分',
                    img: './img/goods.png',
                    name: '花牛苹果',
                    weight: '4.5kg',
                    unitPrice: '100.00',
                    amount: 1,
                    totalPrice: '100.00'
                },
                {
                    time: '2021-03-23 20:12',
                    Serial: '9734',
                    score: '开团消费1积分',
                    allScore: '拼中获得120积分',
                    returnsIntegral: '已开团,拼中返回积分',
                    img: './img/goods.png',
                    name: '花牛苹果',
                    weight: '4.5kg',
                    unitPrice: '100.00',
                    amount: 1,
                    totalPrice: '100.00'
                },
                {
                    time: '2021-03-23 20:12',
                    Serial: '9734',
                    score: '开团消费1积分',
                    allScore: '拼中获得120积分',
                    returnsIntegral: '已开团,拼中返回积分',
                    img: './img/goods.png',
                    name: '花牛苹果',
                    weight: '4.5kg',
                    unitPrice: '100.00',
                    amount: 1,
                    totalPrice: '100.00'
                },
            ]
        },
        mounted(){
            let that = this;
                that.tuxedo();
                that.public.shareLink();
        },
        methods:{
            
            classifyMethod(index){
                let that = this;
                    that.isActive = index;
            },

            costomDatePicker:function(years,startTime,endTime,str){

                for(let j = startTime; j < endTime; j++) {
                years.push({
                        label: ('' + j).length === 1 ? '0'+j + str : '' + j + str,
                        value: ('' + j).length === 1 ? '0'+j : '' + j ,
                    });
                }
                return years;
            },

            startTime(index) {
                let that = this;
                let years = [];
                let mouth =[];
                let date = [];
                let hours = [];
                let minite = [];
                let seconds = [];
            if(!years.length&&!mouth.length) {
                for(let i = 1889; i <= 2030; i++) { 
                    years.push({
                        label: i +"年" ,
                        value: i
                    });
                }
            }

            if (!mouth.length) {
                mouth = that.costomDatePicker(mouth,1,13,"月" )
            }
            if(!date.length) {
                date = that.costomDatePicker(date,1,32,"日" )
            }
            if(!hours.length) {
                hours=that.costomDatePicker(hours,0,24,"时")
            }
            if(!minite.length) {
                minite=that.costomDatePicker(minite,0,60,"分")
            }

            weui.picker(years,mouth,date,hours,minite,seconds,{
                defaultValue: [new Date().getFullYear(), new Date().getMonth()+1, new Date().getDate(),new Date().getHours(),new Date().getMinutes()],
                onConfirm: result=> {
                    if (result.length){
                        let time=result[0].value+'-'+result[1].value+'-'+result[2].value+' '+result[3].value+':'+result[4].value;
                        if(index == 0){
                            that.start = time;
                        }else{
                            that.end = time;
                        }
                    }
                }
            })
        },

        tuxedo(){
            let that = this;
            let userData = JSON.parse(localStorage.getItem("userData"));

            myTeamData({
                userId: userData.userId,
                type: that.isActive,
                beginTime: that.start,
                endTime: that.end
            }).then(res=>{
                that.openNum = res.data.openNum;
                that.successNum = res.data.successNum;
                that.stakeIn = res.data.stakeIn;
                that.stakeUn = res.data.stakeUn;
                that.failureNum = res.data.failureNum;
                that.processingNum = res.data.processingNum;
            })
            .catch(error=>{
                console.log(error);
            })

            myTeamDataList({
                userId: userData.userId,
                type: that.isActive,
                page: 1,
                rows: 10,
                beginTime: that.start,
                endTime: that.end
            }).then(res=>{
                let openGroup = res.data.map((item,index)=>{
                    return{
                        time: item.createTimeStr,
                        Serial: item.teamId,
                        score: item.consumeIntegral,
                        allScore: item.winningIntegral,
                        returnsIntegral: item.orderState==6?'拼中返回积分':(item.orderState==5?'未拼中退款':(item.orderState==4?'已支付(等待开团)':(item.orderState==3?'已完成':(item.orderState==2?'待收货':(item.orderState == 0?'未支付':'待发货'))))),
                        img: item.goodsImage,
                        name: item.goodsName,
                        weight: item.goodsNum+item.goodsSpec,
                        unitPrice: item.goodsPrice,
                        amount: item.goodsNum,
                        totalPrice: item.paymentAmount
                    }
                })

                that.openGroup = openGroup;

            })
            .catch(error=>{
                console.log(error);
            })
        },
    }
})
</script>